<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="范珍">
    <title>vue进阶--8 混合mixin</title>
    <script src='vue.js'></script>
</head>

<body>
    <div id='app'>
        {{add(1,2)}}
        <button @click="sayHello">say hai</button>
    </div>
    <script>
        // mixin:混合、混入
        // 会把混合对象中的内容混入vue组件中
        var mixin = {
            created: function () {
                console.log('created');
            },
            methods: {
                sayHello: function () {
                    console.log('sayHello');
                }
            }
        }

        //全局混入：所有的vue组件中都有这一部分内容
        Vue.mixin({
            methods:{
                add:function(a,b){
                    return a+b
                }
            }
        })
        new Vue({
            el: '#app',
            // 局部混入
            mixins:[mixin]
        })
    </script>
</body>

</html>